<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="选择城市" />

		<!-- 当前选中区域 -->
		<view class="current-area fboxRow Ycenter font24 bg-F5FAF7 color-00C15D">
			<text class="bksCIcon bks-c-ziyuan22dangqian"></text>
			当前选择地区：<text style="font-weight:bold">{{prames.province}}</text>
		</view>

		<!-- 热门城市 -->
		<view class="hot-area">
			<view class="tit fboxRow Ycenter font22 color-9899A1">热门城市</view>
			<view class="fboxWrap">
				<view v-for="(item, index) in hotList" :key="index"
					class="hot-tag bg-F5F5FA color-6A6A6F fboxRow Ycenter Xcenter font24" @tap="areaClick(item)">
					{{item.province}}</view>
			</view>
		</view>

		<!-- 所有区域 -->
		<view class="all-area">
			<view class="tit fboxRow Ycenter font22 color-9899A1">选择城市</view>
			<view class="fboxCol">
				<view v-for="(item, index) in areaList" :key="index"
					class="area-tag fboxRow Ycenter color-36363A font26" @tap="areaClick(item)">{{item.province}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		provincesList
	} from '@/api/bks.examinee.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				hotList: [{
						"id": "50",
						"province": "重庆"
					},
					{
						"id": "11",
						"province": "北京"
					},
					{
						"id": "31",
						"province": "上海"
					},
					{
						"id": "12",
						"province": "天津"
					},
					{
						"id": "44",
						"province": "广东"
					},
					{
						"id": "32",
						"province": "江苏"
					},
					{
						"id": "33",
						"province": "浙江"
					},
					{
						"id": "43",
						"province": "湖南"
					}
				],
				areaList: [
					// {id: 10, province: '安徽'},
				],
				prames: {}
			}
		},
		onLoad(options) {
			this.prames = getApp().globalData.area || { "id": "0", "province": "全国" }
			this._requset()
		},
		methods: {
			// 请求地区列表
			_requset() {
				provincesList().then(res => {
					this.areaList = res.data
				})
			},
			// 地区点击  
			areaClick(item) {
				getApp().globalData.area = item
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.current-area {
		padding: 0 30rpx;
		height: 72rpx;
	}

	.current-area .bksCIcon {
		margin-right: 10rpx;
	}

	.hot-area {
		padding: 10rpx 10rpx 0 30rpx;
	}

	.tit {
		height: 54rpx;
	}

	.hot-tag {
		margin: 10rpx 20rpx 10rpx 0;
		width: 157rpx;
		height: 54rpx;
		border-radius: 4rpx;
	}

	.all-area {
		padding-top: 20rpx;
	}

	.all-area .tit {
		padding: 0 30rpx
	}

	.area-tag {
		padding: 0 30rpx;
		height: 84rpx;
	}

	.area-tag+.area-tag {
		padding: 0 30rpx;
		height: 84rpx;
		border-top: 1px solid #EBEBF0;
	}
</style>